<template>
  <div class="grille-container">
    <!-- 目录 -->
    <cascader-catalog v-model:category-id="query.categoryId" :category-type="categoryType" :title="'试卷目录'" @refresh="handlePage" />
    <div class="main-container">
      <el-form :model="query" inline label-width="80px">
        <el-form-item>
          <el-button v-permission="'paper:save'" type="primary" @click="openFormModal">添加试卷</el-button>
          <el-button v-permission="'paper:edit'" style="margin-left: 10px" :disabled="!ids.length > 0" @click="handleBatchMove()">批量移动</el-button>
          <el-button v-permission="'paper:delete'" style="margin-left: 10px" :disabled="!ids.length > 0" @click="handleBatchDelete()">批量删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-input v-model="query.paperName" placeholder="请输入试卷名称" prefix-icon="Search" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery()"> 查询</el-button>
          <el-button @click="resetQuery()">重置</el-button>
          <common-sort @sort="handleSort" />
        </el-form-item>
      </el-form>
      <el-table v-loading="page.loading" :data="page.list" row-key="id" class="drag-table" @selection-change="handleSelectionChange">
        <el-table-column type="selection" :width="40" />
        <el-table-column :min-width="120" label="试卷名称" prop="paperName">
          <template #default="scope">
            <el-button link type="primary" @click="toPaperPreview(scope.row)">{{ scope.row.paperName }}</el-button>
            <div style="margin-top: 10px">
              <span>【随机组卷：<enum-view :custom-list="selectSwitch" :enum-value="scope.row.randomCombine" />】</span>
              <span>【题目乱序：<enum-view :custom-list="selectSwitch" :enum-value="scope.row.questionDerangement" />】</span>
              <span>【选项乱序：<enum-view :custom-list="selectSwitch" :enum-value="scope.row.optionDerangement" />】</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column :min-width="20" label="题量" prop="questionCount"></el-table-column>
        <el-table-column :min-width="20" label="总分" prop="totalScore"></el-table-column>
        <el-table-column :min-width="20" label="状态">
          <template #default="scope">
            <enum-view :enum-name="'publishStatus'" :enum-value="scope.row.publishStatus" />
          </template>
        </el-table-column>
        <el-table-column :min-width="30" label="创建时间" prop="gmtCreate"></el-table-column>
        <el-table-column :width="220" fixed="right" label="操作" prop="address">
          <template #default="scope">
            <el-button v-permission="'paper:compose'" link type="primary" @click="toPaperCompose(scope.row)"> 组卷</el-button>
            <el-divider direction="vertical" />
            <el-button v-permission="'paper:edit'" link type="primary" @click="openFormModal(scope.row)"> 编辑</el-button>
            <el-divider direction="vertical" />
            <el-dropdown>
              <el-button link type="primary">
                更多操作
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <div v-permission="'paper:publish'" @click="handlePublish(scope.row)">
                    <el-dropdown-item v-if="scope.row.publishStatus === 0">发布</el-dropdown-item>
                    <el-dropdown-item v-if="scope.row.publishStatus === 1">取消发布</el-dropdown-item>
                  </div>
                  <div v-permission="'paper:delete'" @click="handleDeleteByCite(scope.row)">
                    <el-dropdown-item>删除</el-dropdown-item>
                  </div>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <common-pagination v-model:page="page" @pagination="handlePage" />
    </div>
  </div>
  <common-cite v-if="citeRef.visible" :title="citeRef.title" :paper-id="citeRef.paperId" :visible="citeRef.visible" @close="citeRef.visible = false" />
  <catalog-move v-if="catalogMoveVisible" :ids="ids" :category-type="categoryType" :visible="catalogMoveVisible" @callback="handleMove" />
  <paper-form ref="formRef" @refresh="handlePage" />
</template>

<script setup>
  import useTable from '@/utils/table.js'
  import { reactive, ref } from 'vue'
  import CommonPagination from '@/components/Common/Pagination/index.vue'
  import { questionApi } from '@/api/question.js'
  import CatalogMove from '@/components/Cascader/Catalog/CatalogMove.vue'
  import CascaderCatalog from '@/components/Cascader/Catalog/index.vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { useRouter } from 'vue-router'
  import PaperForm from './PaperForm.vue'
  import EnumView from '@/components/Enum/View/index.vue'
  import { selectSwitch } from '@/utils/constants.js'
  import CommonCite from '@/components/Common/Cite.vue'
  import CommonSort from '@/components/Common/Sort/index.vue'
  import { ArrowDown } from '@element-plus/icons-vue'

  const router = useRouter()
  const categoryType = ref(4)

  // 批量选择
  const ids = ref([])
  const handleSelectionChange = (rows) => {
    ids.value = []
    rows.forEach((row) => {
      ids.value.push(row.id)
    })
  }

  // 批量移动
  const catalogMoveVisible = ref(false)
  const handleBatchMove = () => {
    catalogMoveVisible.value = true
  }
  const handleMove = async (row) => {
    if (row) {
      await questionApi.paperMove(row)
      ElMessage.success('修改成功')
      await handlePage()
    }
    catalogMoveVisible.value = false
  }

  // 删除
  const citeRef = reactive({})
  const handleDeleteByCite = async (row) => {
    if (row.cite) {
      citeRef.visible = true
      citeRef.paperId = row.id
      citeRef.title = row.paperName
    } else {
      handleDelete(row)
    }
  }

  // 批量删除
  const handleBatchDelete = async () => {
    ElMessageBox.confirm('是否确认删除？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      questionApi.paperBatchDelete(ids.value).then((res) => {
        ElMessage.success(res)
        handlePage()
      })
    })
  }

  // 组卷
  const toPaperCompose = (item) => {
    router.push({ path: '/paper/compose', query: { paperId: item.id } })
  }

  // 预览
  const toPaperPreview = (item) => {
    router.push({ path: '/paper/preview', query: { paperId: item.id } })
  }

  // 添加/修改
  const formRef = ref()
  const openFormModal = (item) => {
    formRef.value.onOpen(item)
  }

  // 基础功能
  const { page, handlePage, query, handleQuery, resetQuery, handleDelete, handlePublish, handleSort } = useTable({
    page: questionApi.paperPage,
    delete: questionApi.paperDelete,
    publish: questionApi.paperEditPublishStatus,
    sort: questionApi.paperSort
  })
</script>
